<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/mall.css">
    <link rel="stylesheet" href="../css/zx.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="kong11"></div>
    <div id="mulu">
        <!-- 导航 -->
        <div id="cateHead">
            <p><span>首页 / 商城系统 / </span>品类管理</p>
            <p>品类管理</p>
        </div>
    </div>

    <div id="catemain">
        <div class="catequery">
            <p class="tiaojianp">查询条件</p>
            <div class="row">
                <div class="col-md-4">
                    <label>一级品类:
                        <select class="cateselect" id="onecate">
                            <option value="全部">全部</option>
                            <option value="智能手环">智能手环</option>
                            <option value="智能称">智能称</option>
                            <option value="睡眠管理">睡眠管理</option>
                            <option value="营养健康">营养健康</option>
                            <option value="护理清洁">护理清洁</option>
                            <option value="智能手表">智能手表</option>
                            <option value="血压计">血压计</option>
                            <option value="运动户外">运动户外</option>
                        </select>
                    </label>
                </div>
                <div class="col-md-5">
                    <div class="formtimeto">
                        <label>创建日期:
                            <input type="date" class="mytime1" value="">至
                            <input type="date" class="mytime2" value="">
                        </label>
                    </div>

                </div>
                <div class="col-md-3">
                    <button class="myczbutn">重置</button>
                    <button class="myqurbutn">查询</button>
                </div>
            </div>
        </div>
        <div id="tdheight">
            <div class="catetablehead mybutn">
                <button class="myxzbutn"><span class="iconfont icon-zengjia jiahao"></span> 新增</button>
                <button class="myxjbutn">下架</button>
                <span>品类下架后，类目下的商品将不在前端显示</span>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th> <input type="checkbox" name="" id=""></th>
                        <th>品类</th>
                        <th>品类名称</th>
                        <th>顺序</th>
                        <th>子品类</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody">
                </tbody>
            </table>
            <div id="pagebut">

            </div>
        </div>
    </div>

    <div>
        <span class="foot1">大健康综合管理后台</span>
        <span class="foot2">版权所有:@大健康综合(集团)有限公司Meinian Onehealth Healthcare (Group)Co.</span>
        <span class="foot2">沪ICP备09017846号-3沪公网安备31010602006448号</span>
    </div>

    <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
    <script src="../JavaScript/utils.js"></script>
    <script src="../JavaScript/mall.js"></script>
    <script>
        var querydata = []
        let newData = getmyData("goods")
        if (newData == null) {
            setmyData("goods", categoryData)
            newData = getmyData("goods")
        }
        cutdata(newData, querydata, 9, 13, 2)

        // 去重
        for (let j = 0; j < querydata.length; j++) {
            for (let i = j + 1; i < querydata.length; i++) {
                if (querydata[j].categoryName == querydata[i].categoryName) {
                    querydata.splice(i, 1)
                    i--
                }
            }
        };
        showTable(5, querydata)

        var sepc1
        var sepc2
        var sepc3
        let mbtr = document.querySelectorAll(('#mytbody tr:nth-of-type(1)'))
        function mysepcil() {
            sepc1 = document.querySelectorAll('#mytbody td:nth-of-type(1)')
            sepc2 = document.querySelectorAll('#mytbody td:last-of-type')
            $(sepc1).before(`<td><input type="checkbox" name="" class="check"></td>`)
            // console.log(sepc2.length);
            for (let o = 0; o < sepc2.length; o++) {
                $(sepc2[o]).after(`<td><button class='mybjbutn' data-bj='${o}'>编辑</button><button class='mydelbutn' data-biaoshi='${o}'>删除</button><button class="mylookpage" data-lookbut='${o}'>查看</button></td>`)
            }
            $(`td>button`).css({
                margin: '0 10px',
                backgroundColor: '#fff',
                color: 'rgba(24, 144, 255, 1)'
            })
            delfun()
            mylook()
            bjfun()
            // check()
            checkfun()
            // goodsxjfun(newData, '#onecate option', 'categoryName', '.myxjbutn')
        }
        // 操作后的重新渲染
        function twoshow() {
            setmyData("goods", newData)
            querydata = []
            newData = getmyData("goods")
            cutdata(newData, querydata, 9, 13, 2)
            // 去重
            for (let j = 0; j < querydata.length; j++) {
                for (let i = j + 1; i < querydata.length; i++) {
                    if (querydata[j].categoryName == querydata[i].categoryName) {
                        querydata.splice(i, 1)
                        i--
                    }
                }
            };
            showTable(5, querydata)
        }
        // 给删除按钮绑定函数
        function delfun() {
            sepc3 = document.querySelectorAll('#mytbody td:last-of-type')
            $(sepc3).on('click', '.mydelbutn', function () {
                let tdxb = parseInt($(this).attr('data-biaoshi'))
                let mytext = $(sepc3[tdxb]).parent().children(`td:nth-of-type(3)`).text()
                $(sepc3[tdxb]).parent().remove()
                console.log($(sepc3[tdxb]).parent());
                querydata.splice(tdxb, 1)
                // console.log(querydata);
                // newData.forEach((item, index) => {
                for (let l = 0; l < newData.length; l++) {
                    if (newData[l].categoryName == mytext) {
                        newData.splice(l, 1)
                        l--
                    }

                }
                twoshow()

                // 需要重新传到浏览器，并且名字一样
            })

        }

        // 给查询绑定函数
        // 查询需要的数组
        let txarry = []
        $('.myqurbutn').click(function () {
            // if ($('#onecate').val() != '全部' && $('.mytime1').val() != '' && $('.mytime2').val() != '') {
            for (let i = 0; i < querydata.length; i++) {
                if (querydata[i].categoryName == $('#onecate').val() && $('.mytime1').val() == '' && $('.mytime2').val() == '') {
                    txarry.push(querydata[i])
                }
                let oldtime = bjmytime(querydata[i].createTime)
                let newtimesaml = bjmytime($('.mytime1').val())
                let newtimebig = bjmytime($('.mytime2').val())
                if ($('#onecate').val() == '全部' && oldtime >= newtimesaml && oldtime <= newtimebig) {
                    txarry.push(querydata[i])
                    console.log(txarry);
                }
                if ($('#onecate').val() != '全部' && oldtime >= newtimesaml && oldtime <= newtimebig && querydata[i].categoryName == $('#onecate').val()) {
                    txarry.push(querydata[i])
                    console.log(txarry);
                }
            }
            showTable(5, txarry)
            txarry = []
            // }
        })

        // 给重置按钮绑定函数，重新渲染
        $('.myczbutn').click(function () {
            showTable(5, querydata)
        })

        // 新增需要的属性
        let xzsxarr = ['categoryId', 'categoryName', 'order', 'Sub_category']
        // 新增按钮绑定函数
        $('.myxzbutn').click(function () {
            $('#mulu').html(` <div id="cateHead">
                            <p><span>首页 / 商城系统 /品类管理 / </span>添加品类</p>
                            <p>添加品类</p>
                        </div>`)
            showcatexzpage(5, 2, '.catexz', mycatexzarrylab, mycatexzarryspa)
            $('.catexz').after(`<div><button class="mybcbutnadd">保存</button><button class='myfhbutn'><a href="./category.html">取消</a></button></div>`)

            $('.mybcbutnadd').click(function () {
                // 获取一个tr
                console.log(newData[1]);
                let xzinput = document.querySelectorAll('.catexz input')

                for (let k = 0; k < xzinput.length; k++) {
                    newData[1][`${xzsxarr[k]}`] = $(xzinput[k]).val()

                }

                // 往select里面添加opyion不能实现
                // let xgoption = document.querySelectorAll('#onecate option')
                console.log($('#onecate:last-child'));
                $('option:last-of-type').after(`<option value="123">123</option>`)
                twoshow()
                location.href = "./category.html"

            });
        })

        // 编辑按钮
        function bjfun() {
            let catevalue = []
            let catkey = []
            $('.mybjbutn').click(function () {
                let bjxb = parseInt($(this).attr('data-bj'))
                // 拿到对象的属性值
                for (var i in querydata[bjxb]) {
                    catevalue.push(querydata[bjxb][i])
                    catkey.push(i)
                }
                // 编辑的属性值
                let newcatevalue = catevalue.slice(0, 4);
                // 编辑的属性值对应的属性
                let newcatekey = catkey.slice(0, 4);
                console.log(newcatevalue);
                console.log(newcatekey);
                showcatexzpage(5, 2, '.catexz', mycatexzarrylab, mycatexzarryspa)
                // 获得所有 text框，将需要编辑的数据渲染进来
                let xzinput = document.querySelectorAll('.catexz input')
                for (let k = 0; k < xzinput.length; k++) {
                    // console.log(xzinput[k].value());
                    $(xzinput[k]).val(`${newcatevalue[k]}`)
                }
                $('.catexz').after(`<div><button class="mybcbutnxg">保存</button><button class='myfhbutn'><a href="./category.html">取消</a></button></div>`)
                // 保存按钮绑定函数

                $('.mybcbutnxg').click(function () {
                    // 得到input框的值,并且将数值newdata里面对应的值改变，再次渲染)
                    // 每个input里面的值赋值给，对应属性的属性值
                    let xzinputbc = document.querySelectorAll('.catexz input')
                    newData.forEach((item, index) => {
                        for (var i in newData[index]) {
                            if (newData[index].categoryName == newcatevalue[1]) {
                                for (let k = 0; k < xzinputbc.length; k++) {
                                    newData[index][`${newcatekey[k]}`] = $(xzinputbc[k]).val()
                                }
                            }
                        }
                    });
                    twoshow()
                    location.href = "./category.html"
                })
            })


        }

        // 给查看按钮绑定函数
        function mylook() {
            $('.mylookpage').click(function () {
                let lookxb = parseInt($(this).attr('data-lookbut'))
                // 拿到对象的属性值
                let catevalue = []
                for (var i in querydata[lookxb]) {
                    catevalue.push(querydata[lookxb][i])
                }
                let newcatevalue = catevalue.slice(0, 4);
                showcatexzpage(5, 2, '.catexz', mycatexzarrylab, newcatevalue)
                $('.catexz').after(`<button class='myfhbutn'><a href="./category.html">返回</a></button>`)
            })

        }
        // 调用下架的函数
        // 下架以后将选中的品类下的所有商品状态都改为已下架
        $('.myxjbutn').click(function () {
            let xjgoods = []
            let mycheck = document.querySelectorAll('.check')
            for (let l = 0; l < mycheck.length; l++) {
                if ($(mycheck[l]).attr('date-checked') == 'true') {
                    console.log($(mycheck[l]).parent().parent().children(`td:nth-of-type(3)`).text());
                    newData.forEach((item, index) => {
                        console.log();
                        if ($(mycheck[l]).parent().parent().children(`td:nth-of-type(3)`).text() == item.categoryName) {
                            newData[index].goodsState = '已下架'
                        }
                    });

                    twoshow()
                }

            }
        })

        // 用来渲染新增页面
        // 行数，列数，lable，操作
        function showcatexzpage(trnum, tdnum, pardom, arrlab, arrspa) {
            $('#catemain').html(`
                <div class="xzmain">
                    <table class="catexz">
                    </table>
                    
            </div>
            `)
            myxztable(trnum, tdnum, pardom, arrlab, arrspa)
        }

        // 将时间转为数字
        function bjmytime(gs) {
            let mystrz = gs.slice(0, 4)
            let mystr1 = gs.slice(5, 7)
            let mystr2 = gs.slice(8, 10)
            return parseInt(mystrz + mystr1 + mystr2)
        }
        // 需要的数组
        var mycatexzarrylab = ['品类ID：', '品类名称：', '品类顺序：', '子品类：', '品类描述：'
        ]
        var mycatexzarryspa = [
            ' <input type="text" class="grayborder" placeholder="10007">',
            ' <input type="text" class="grayborder" placeholder="大牌专区">',
            ' <input type="text" class="grayborder txtwidsaml" placeholder="1">',
            ' <input type="text" class="grayborder" placeholder="华大基因">',
            '<textarea name="" id="" cols="30" rows="10"></textarea> '
        ]
        // 用来生成table框架
        function myxztable(mytr, mytd, wz, myarrylab, myarryspa) {
            for (let m = 0; m < mytr; m++) {
                $(wz).append(`<tr class="myxztr"></tr>`)
                for (let n = 0; n < mytd; n++) {
                    if (n % 2 == 0 || n == 0) {
                        $(`tr:nth-of-type(${m + 1})`).append(`<td class="myxztdone">${myarrylab[m]}</td>`)

                    } else {
                        $(`tr:nth-of-type(${m + 1})`).append(`<td>${myarryspa[m]}</td>`)
                    }
                }
            }
        }


    </script>
</body>

</html>